<template>
    <div class="col-2 mx1">
        <ol class="rectangle-list">
            <li>
                <router-link to='/bar'>Bar</router-link>
            </li>
            <li>
                <router-link to='/line'>Line</router-link>
            </li>
            <li>
                <router-link to='/pie'>Pie</router-link>
            </li>
            <li>
                <router-link to='/map'>Map</router-link>
            </li>
        </ol>
    </div>
</template>
<script>
export default {
}
</script>
<style lang='less' scoped>
ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    & ol {
        margin: 0 0 0 2em;
    }
}


/*rectangle list*/

.rectangle-list a {
    position: relative;
    display: block;
    padding: 0.4em 0.4em 0.4em 0.8em;
    *padding: 0.4em;
    margin: 0.5em 0 0.5em 2em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    /*transition动画效果*/
    transition: all 0.3s ease-out;
}

.rectangle-list a:hover {
    background: #eee;
}

.rectangle-list a::before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    /*background: #fa8072;*/
    background: #EA6F5A;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    transition: all 0.3s ease-out;
}

.rectangle-list a::after {
    position: absolute;
    content: "";
    border: 0.5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -0.5em;
    transition: all 0.3s ease-out;
}

.rectangle-list a:hover::after {
    left: -0.5em;
    /*border-left-color: #fa8072;*/
    border-left-color: #EA6F5A;
}


/*rounded shaped numbers*/

.rounded-list a {
    position: relative;
    display: block;
    padding: 0.4em 0.4em 0.4em 2em;
    *padding: 0.4em;
    /*for ie6/7*/
    margin: 0.5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    /*CSS3属性*/
    border-radius: 0.3em;
    /*制作圆角*/
    /* transition动画效果*/
    transition: all 0.3s ease-out;
}

.rounded-list a:hover {
    background: #eee;
}

.rounded-list a:hover::before {
    /*悬停时旋转编码*/
    transform: rotate(360deg);
}

.rounded-list a::before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: 0.3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all 0.3s ease-out;
}
</style>